<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年07月14日 10:26:46
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
    <div class="">
        <!-- 按钮开始 -->
        <el-button @click="toAdd" type="primary">新增</el-button>
        <!-- 按钮结束 -->
        <!-- 表格开始 -->
        <el-table :data="tableData" style="width: 100%">
                <el-table-column type='index' :index='1' label="序号" width="60"></el-table-column>
                <el-table-column prop="name" label="名称" ></el-table-column>
                <el-table-column prop="no" label="排序号"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button @click="toEdit(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="toDelete(scope.row.id)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        <!-- 表格结束 -->
        <!-- 模态框开始 -->
        <el-dialog :title="title" :visible.sync="visible">
            <el-form :model="form" :rules="rules" ref="myForm">
                <el-form-item label="资讯名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序号" :label-width="formLabelWidth" prop="no">
                    <el-input v-model="form.no" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="资讯描述" :label-width="formLabelWidth" prop="description">
                    <el-input v-model="form.description" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button @click="toSubmit('myForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 模态框结束 -->
    </div>
</template>

<script>
import {findAll,saveOrUpdate,deleteById} from '@/api/information'
export default {
  // 组件名称
  name: 'demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      tableData:[],
      form:{},
      //设置表单控件宽度
      formLabelWidth:'80px',
      //模态框title变量
      title:'',
      //控制模态框显示与隐藏
      visible:false,
      //校验表单
      rules: {
          name: [
              { required: true, message: '请输入资讯名称', trigger: 'blur' },
          ],
      }
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    //查询资讯分类
    async findAllCategoryPro(){
        let res = await findAll();
        console.log(res);
        this.tableData=res.data;
    },
    //给新增按钮绑定事件toAdd
    toAdd(){
        this.visible = true;    //显示模态框
        this.title = '添加栏目信息';
        this.form={};
    },
    //给确定按钮绑定事件 执行保存(新增 空)或更新(修改--id)操作
    toSubmit(formName) {
        this.$refs[formName].validate(async valid => {
            if (valid) {
                //校验通过
                let res = await saveOrUpdate(this.form);
                console.log(res);
                this.visible=false;
                this.$message({
                    message:res.message,
                    type: 'success'
                });
                //刷新页面 重新发请求
                this.findAllCategoryPro();
            } else {
                this.$message.error('保存失败');
                return false;
            }
        });
    },
    //给编辑按钮绑定事件
    toEdit(row){
        this.visible=true;
        this.title='修改资讯分类';
        this.form={...row};
    },
    //给删除按钮绑定事件
    toDelete(id){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async() => {
                let res = await deleteById({id:id});
                //刷新页面 重新发请求
                this.findAllCategoryPro();
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
        });
    },
  },
  // 以下是生命周期钩子
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.findAllCategoryPro();
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy () {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>

</style>
